'use client'

import { useState } from 'react'
import Image from 'next/image'
import { X, Menu } from 'lucide-react'
import { useRouter } from 'next/navigation'

import Logo from '@/components/common/Logo'
import GradientButton from '@/components/common/GradientButton'
import OutlineButton from '@/components/common/OutlineButton'

export default function NavBar() {
  const router = useRouter()
  const [menuOpen, setMenuOpen] = useState(false)

  const scrollToSection = (index) => {
    let id = ''
    if (index === 0) {
      id = 'features'
    } else if (index === 1) {
      id = 'process'
    } else if (index === 2) {
      id = 'pricing'
    } else if (index === 3) {
      router.push('/sample')
    }

    const el = document.getElementById(id)
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' })
      setMenuOpen(false)
    }
  }

  return (
    <nav className="sticky top-0 left-0 right-0 z-50 bg-[rgba(11,12,15,0.7)] backdrop-blur border-solid border-b-[#1f2533]">
      {/* ✅ 移除 max-w 限制，改成两边贴边 */}
      <div className="w-full px-6 lg:px-10 py-3 flex items-center justify-between">
        {/* 左侧 logo */}
        <Logo />

        {/* 桌面端导航 */}
        <div className="hidden md:flex items-center space-x-3">
          {['Features', 'How it works', 'Pricing', 'View Sample'].map((item, index) => (
            <OutlineButton key={index} title={item} onClick={() => scrollToSection(index)} />
          ))}

          <GradientButton title="Start Screening" onClick={() => scrollToSection(4)} />
        </div>

        {/* 移动端右侧按钮 */}
        <div className="flex md:hidden items-center space-x-2 overflow-visible">
          <GradientButton title="Start Screening" onClick={() => scrollToSection(4)} />

          <div
            onClick={() => setMenuOpen(!menuOpen)}
            className="w-[40px] h-[40px] flex items-center justify-center rounded-2xl
bg-[#0d1117]/80 border-solid border-[#2a2f3a]
      text-gray-200 hover:text-white hover:border-[#3b82f6]
      shadow-inner hover:shadow-[0_0_20px_rgba(56,189,248,0.15)]
      transition-all duration-300 ease-out backdrop-blur-sm cursor-pointer">
            {menuOpen ? (
              <X className="w-6 h-6 text-white transition-transform duration-300 rotate-0 hover:rotate-90" />
            ) : (
              <Menu className="w-6 h-6 text-white transition-transform duration-300 scale-100 hover:scale-110" />
            )}
          </div>
        </div>
      </div>

      {/* 移动端下拉菜单 */}
      {menuOpen && (
        <div className="md:hidden flex flex-col items-center bg-[#0a0a0a]/90 border-t border-[#1a1a1a] pb-6 space-y-3 px-4">
          {['Features', 'How it works', 'Pricing', 'View Sample'].map((item, index) => (
            <div
              key={item}
              className="w-full text-left px-5 py-3 text-gray-300 font-medium bg-[#0d1117]/60 rounded-2xl border-solid border-[#1f2937] shadow-inner hover:shadow-[0_0_20px_rgba(56,189,248,0.2)] hover:text-white hover:bg-[#111827]/80 transition-all duration-300 ease-out backdrop-blur-sm cursor-pointer"
              onClick={() => {
                setMenuOpen(false)
                scrollToSection(index)
              }}>
              {item}
            </div>
          ))}
        </div>
      )}
    </nav>
  )
}
